<!--
* description: 公告管理-发布对象
* creator: wangml
* createdDate: 2021
-->

<template>
  <section id="typeEdit" class="editCarBrand filter-params-e3s">
    <el-dialog
      v-dialogDrag
      width="50%"
      title="选择成员"
      :close-on-click-modal="false"
      :visible="handleVisibled"
      :append-to-body="true"
      center
      @close="sendCodeHandleVisible"
    >
      <dialogHeader slot="title" :title="'选择成员'" :style-type="$store.state.app.dialogType" />
      <div id="searchFormGroup" ref="oneTable.searchArea" class="filter-container filter-params">
        <!-- 头部 -->
        <!--        <el-row>-->
        <!--          <el-col :span="10">-->
        <!--            <el-input v-model="searchCode" placeholder="请输入" size="small" />-->
        <!--            <el-button type="primary" icon="el-icon-search" size="small" @click="queryF">查询</el-button>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
      </div>
      <el-row id="elTableD" :gutter="20">
        <!-- 树状图 -->
        <el-col :span="8" class="tree-content">
          <div class="tree-title">
            <h3>待选择</h3>
          </div>
          <div id="treeD" :style="{height:currentHeight+'px'}">
            <el-tree
              ref="tree"
              :key="treeKey"
              row-key="linkId"
              show-checkbox
              default-expand-all
              class="filter-tree"
              :data="menuList"
              :node-key="nodeKeys"
              :props="defaultProps"
              highlight-current
              @check-change="checkChange"
            />
          </div>
        </el-col>
        <el-col :span="15">
          <el-table
            :data="orgData"
            height="435"
            border
            stripe
            style="width: 100%">
            <el-table-column
              header-align="center"
              align="center"
              label="序号"
              type="index"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="已选择">
              <template slot-scope="{row}">
                <span>{{ row['orgName'] }}</span>
                <span style="color: #00b7ee">{{ `  (${row['parent'].orgName})` }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <div class="table-col">
          <el-button @click="submitData" type="primary">确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </el-row>
    </el-dialog>
  </section>

</template>

<script>
import { orgApis } from '@/api/apiList/org'
// import mList from './a.json'

export default {
  name: 'EditNew',
  components: {
    dialogHeader: () => import('@/components/dialogHeader') // 弹窗标题
  },
  props: {
    handleVisibled: { type: Boolean, default: false }
  },
  data() {
    return {
      allOrgRealId: [],
      // mList: mList,
      orgData: [],
      value: [],
      currentHeight: 400,
      bounce: true,
      treeKey: this.$utils.generateId(),
      menuList: [],
      nodeKeys: 'orgRealId',
      // 树状图参数
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },
      // 查询条件
      listQuery: {
        isEnable: '1',
        companyid: this.$store.getters.orgInfo.COMPANY_ID,
        orgBelongType: '0,1,2,3,4,5,6,7,8'
      }
    }
  },
  created() {
    this.$nextTick(() => {
      // this.getCurrentHeight()
      this.queryMenue()
    })
  },
  mounted() {

  },
  methods: {
    // 提交
    submitData() {
      this.$emit('getSelectData', this.orgData)
      this.sendCodeHandleVisible()
    },
    // 取消
    cancel() {
      this.sendCodeHandleVisible()
    },
    // 树形菜单选择触发事件 参数 ->  node: 节点  isSelect: 是否被选中
    checkChange(node, isSelect) {
      if (
        // 被选中 并且没有 子节点 并且不在 table中 push到table数据中
        isSelect &&
        !node.children.length &&
        !this.orgData.some(n => n['orgRealId'] === node['orgRealId'])
      ) {
        this.orgData.push(node)
      } else if (
        // 取消选中 并且没有 子节点 并且在 table中 从table数据中 删除
        !isSelect &&
        !node.children.length &&
        this.orgData.some(n => n['orgRealId'] === node['orgRealId'])
      ) {
        this.orgData.splice(
          this.orgData.findIndex(o => o['orgRealId'] === node['orgRealId']), 1
        )
      }
    },
    getCurrentHeight(val) {
      this.currentHeight = document.getElementById('elTableD').offsetHeight + 40
    },
    getSubchilds(currData, datas = []) {
      if (currData.children.length) {
        currData.children.forEach(child => {
          this.getSubchilds(child, datas)
        })
      } else {
        datas.push(currData)
      }
      return datas
    },
    // 组织树查询
    queryMenue(page) {
      const that = this
      if (this.isEnable === '0') {
        this.listQuery.isEnable = ''
      } else {
        this.listQuery.isEnable = '1'
      }
      const queryObj = {
        // api配置
        apiConfig: orgApis.mdmOrgRelationRealQueryByPage,
        // 需要调用的API服务配置
        apiServices: [
          {
            // 表格中台返回网格的字段
            apiQueryRow: ['orgName', 'orgCode', 'orgBelongType', 'orgTreeId', 'linkId', 'isEnable',
              'parentOrgTreeId', 'treeType', 'orgRealId']
          }
        ],
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          pageSize: -1,
          pageIndex: 1,
          // 当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: that.listQuery
        }
      }
      // 转换了中台请求格式数据
      var paramD = that.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then(response => {
        if (
          response.result === '1'
        ) {
          this.dataList = response.rows
          this.menuList = this.$utils.parseTreeFromList(
            this.dataList,
            'parentOrgTreeId',
            'orgTreeId'
          )
          this.addParent(this.menuList)
          // this.getAllorgRealId(this.menuList)
        }
      })
    },
    getAllorgRealId(mList, datas = []) {
      mList.forEach(item => {
        datas.push(item['orgRealId'])
        if (item.children.length) {
          this.getAllorgRealId(item.children, datas)
        }
      })
      this.allOrgRealId = datas
    },
    addParent(mList, parent) {
      mList.forEach(node => {
        if (node.parentOrgTreeId !== '-1' && !parent) {
          node['parent'] = null
        } else {
          node['parent'] = parent
        }
        if (node.children.length) {
          this.addParent(node.children, node)
        }
      })
    },
    sendCodeHandleVisible() {
      this.$emit('update:handle-visibled', false)
    }
  }
}
</script>

<style lang="css" scoped>
  >>>.el-transfer__buttons {
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
  }
  >>>.el-transfer-panel__list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    height: 350px;
    overflow: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  >>> .tree-title>h3 {
    font-size: 14px;
    text-align: center;
    font-weight: 600;
    background-color: #E3E3E3;
    padding: 3px 0;
    border-radius: 3px 3px 0 0;
  }
  .tree-content {
    margin-left: 10px;
    padding: 0 !important;
    border: 1px solid #d9e2ef;
    border-radius: 3px 3px 0 0;
  }
  .table-col{
    padding: 10px;
    float: right;
    overflow: hidden;
  }
  #treeD {
    overflow-y: 400px;
    overflow-x: auto;
  }

</style>
